<template>
    <view class="address-list-management">
        <mescroll-uni top="0"  @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"  class="message" @init="mescrollInit">
         <view class="address-list">
            <view
                    class="address-list-item"
                    v-for="(item, index) in addressList"
                    :key="index"
                    @tap="changeDefault(item, index)"
            >
                <view
                        v-if="addlistType === 'choose'"
                        @tap="checkAddress(item)"
                        class="one common-check-btn icon-btn"
                >
                    <image class="common-choose check-btn"   :src="http+(getClass(item)?'choose-active':'choose')+'.png'"/>
                </view>
                <view class="address-info">
                    <view class="base-info">
                        <text class="default-change" v-if="item.memberContactDefault === 1">默认</text>
                        <text style="margin-right: 30rpx;">{{item.memberContactName}}</text>
                        <text>{{item.memberContactPhone}}</text>
                    </view>
                    <view class="address">
                        {{item.memberContactDetail}}
                    </view>
                    <view class="btn-wrapper">
                        <text class="edit" @tap.stop="editAddress(item)">编辑</text>
                        <text class="del" @tap.stop="delAddress(item)">删除</text>
                    </view>
                </view>
            </view>
        </view>
        </mescroll-uni>
        <view class="fix common-save-btn">
            <text class="common-txt" @tap="addNewAddress">新增</text>
        </view>
        <gwShowModal
                v-model="showModal"
                type="tips"
                width="550rpx"
                height="260rpx"
                @confirm="confirmHandle"
                tipsContent="确认删除该地址吗？"/>
    </view>
</template>

<script>
    import service from "@/service";
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    import gwShowModal from '@/pages/components/gw-show-modal'
    export default {
        name: "address",
        components: {
            MescrollUni, gwShowModal
        },
        data() {
            return {
                addressList: [],
                showModal: false,
                item: {},
                ids: [],
                http: this.$https,
                memberContactId: '',
                page: 1,
                limit: 10,
                addlistType: 'list', // 判断是管理列表还是选择地址
                downOption: {
                    auto: false,
                },
                upOption:{
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true,
                    // auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        icon: 'https://img.thumbrary.com/empty.png',
                        tip: '暂无数据'
                    },
                    offset: 130,
                    textNoMore:'我是有底线的 >_<'
                },
                mescroll: null
            }
        },
        onLoad(params){
            let {type, memberContactId} = params;
            if(memberContactId){
                this.memberContactId = Number(memberContactId);
            }
            this.addlistType = type || 'list';
        },
        methods: {
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            downCallback(mescroll){
                this.addressList = [];
                this.page = 1;
                mescroll.resetUpScroll();
            },
            upCallback(mescroll){
                this.page = mescroll.num;
                this.getAddressList();
            },
            getClass(item){
                if(this.memberContactId){
                    return item.memberContactId === this.memberContactId
                } else if(!this.ids.length){
                    return item.memberContactDefault === 1;
                } else {
                    return this.ids.includes(item.memberContactId)
                }
            },
            confirmHandle(){
                this.showModal = false;
                uni.showLoading({
                    title: '',
                });
                service.mineService.contactsAddress({
                    data: {
                        memberContactId: this.item.memberContactId
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.getAddressList();
                            this.item = {}
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                    method: 'DELETE'
                });
            },
            checkAddress(item){
                if(this.ids.includes(item.memberContactId)){
                    this.ids = this.ids.filter(id => id===item.memberContactId)
                } else {
                    this.ids.push(item.memberContactId)
                }
                this.$store.commit('orderAddress', item);
                uni.navigateBack(-1);
            },
            getAddressList() {
                uni.showLoading({
                    title: '加载中',
                });
                let params = {
                    page: this.page,
                    limit: this.limit
                }
                service.mineService.addressList({
                    data: params,
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            let data = res.result.data || [];
                            this.page > 1 ? this.addressList.push(...data) : this.addressList = data;
                            this.mescroll && this.mescroll.endBySize(data.length, res.result.num);
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            delAddress(item){
                this.showModal = true;
                this.item = item;
            },
            editAddress(item){
                uni.navigateTo({
                    url: `./addAddress?id=${item.memberContactId}`
                });
            },
            addNewAddress(){
                uni.navigateTo({
                    url: './addAddress'
                })
            },
            changeDefault(item, index){
                // item.isDefault = !item.isDefault;
                // this.$set(this.addressList, index, item);
               this.defaultIndex = index
            }
        },
        onShow() {
            this.addressList = [];
            this.page = 1;
            this.mescroll && this.mescroll.resetUpScroll();
        },
    }
</script>

<style scoped lang="scss">
    .address-list-management{
        background:rgba(249,249,249,1);
        min-height: 100%;
        padding-bottom: 100rpx;
        box-sizing: border-box;
        .address-list-item{
            padding: 30rpx;
            align-items: center;
            background: #ffffff;
            display: flex;
            margin-top: 20rpx;
            .icon-btn{
                flex: 0 0 170rpx;
                padding-left: 42rpx;
                box-sizing: border-box;
            }
            .address-info{
                flex-grow: 1;
            }
            .base-info{
                font-size: 32rpx;
            }
            .default-change{
                background: #2BA8FC;
                color: #fff;
                padding: 0rpx 13rpx;
                margin-right: 30rpx;
                border-radius: 2rpx;
            }
            .address{
                color: #999999;
                line-height: 40rpx;
                margin-top: 10rpx;
            }
            .btn-wrapper{
                margin-top: 28rpx;
                text{
                    margin-right: 40rpx;
                    padding: 2rpx 12rpx;
                    border-radius: 2rpx;
                }
                .edit{
                    color: #2BA8FC;
                    border: 1rpx solid #2BA8FC;
                }
                .del{
                    color: #FC5762;
                    border: 1rpx solid #FC5762;
                }
            }
        }
    }
</style>
